<script setup lang="ts">
  import { ref } from "vue"
  const props = defineProps({
    colomns: {
      type: Array,
      default: () => [{
        key: 1,
        name: '序号'
      }, {
        key: 2,
        name: '日期'
      }, {
        key: 3,
        name: '编号',

      },
      {
        key: 4,
        name: '餐厅',
      },
      ]
    },
    data: {
      type: Array,
      default: () => []
    }
  })
</script>

<template>
  <div>
    <div class="tableHead">
      <div v-for="item in colomns" :key="item.key">
        <div class="headItem" :style="{width: item.width}">{{item.name}}</div>
        <div v-for="(it,index) in data">
          <div v-if="item.slot">
            <slot :name="item.slot" v-bind="it">
            </slot>
          </div>
          <div v-else>
            <div v-if="item.key == 'index'" class="thItem">{{index < 9 ? 0 : '' }}{{index + 1}}</div>
                <div class="thItem" :style="{width: item.width}" v-else>{{it[item.key]}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<style lang="scss" scoped>
  .tableHead {
    display: flex;
    justify-content: space-between;
  }

  .headItem {
    flex: 1;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    min-width: 24px;
  }

  .thItem {
    width: 24px;
    padding: 7px 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }
</style>